<script setup>
const props = defineProps({
  cover: {
    type: String,
    required: true,
    default: "@/resource/Images/pexels-boris-pavlikovsky-5499117.jpg",
  },
  info:{
    type:Object,
    required:true,
    default:()=>({
      id:"1",
      title:"社团",
      summary:"社团简介",
    })
  }
})
</script>

<template>
  <div class="club-card">
    <div class="meta">
      <RouterLink :to="`/`" style="width: 100%; height: 100%;">
        <img src="E:\vueProject\ClubFront\src\resource\Images\pexels-boris-pavlikovsky-5499117.jpg" alt="Club Cover" />
      </RouterLink>
    </div>
    <div class="description">
      <h1>{{ props.info.title }}</h1>
      <h2>{{ props.info.summary }}</h2>
      <p class="read-more">
        <router-link :to="`/event/${props.info.id}`">
          Read More
        </router-link>
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use"@/styles/color-var-prim.scss";
$color_white: #fff;
$color_prime: #5ad67d;
$color_grey: #e2e2e2;
$color_grey_dark: #a2a2a2;
.club-card{
  min-width: 1000px;
  width: 100%;
  display: flex;
  margin: 1rem auto 1.6%;
}
.meta{
  margin-right: 2%;
  z-index: 0;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  img{
    transition: transform 0.3s ease; // 添加过渡效果，使放大过程更平滑
    &:hover{
      transform: scale(1.2); // 放大图片
    }
  }
}
.description{
  margin-top: 5%;
  margin-left: 2%;
  padding: 1rem;
  position: relative;
  width: 50%;
  overflow: hidden;
  z-index: 1;
  h1 {
    line-height: 1;
    margin: 0;
    font-size: 3.5rem;
  }
  .read-more{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: color-var-prim.$dark ;
    &:hover{
      transform: scale(1.2);
    }
  }
}

</style>